<script setup>
import { computed } from 'vue'
import { Link } from '@inertiajs/vue3'
import { ChevronLeftIcon, ChevronRightIcon, BookOpenIcon } from '@heroicons/vue/24/outline'

const props = defineProps({
    series: {
        type: Object,
        default: null
    },
    seriesPosts: {
        type: Array,
        default: () => []
    },
    currentPostId: {
        type: [Number, String],
        default: null
    },
    prevInSeries: {
        type: Object,
        default: null
    },
    nextInSeries: {
        type: Object,
        default: null
    }
})

// 当前文章 ID
const currentId = computed(() => {
    if (props.currentPostId === null || props.currentPostId === undefined) {
        return null
    }
    const numeric = Number(props.currentPostId)
    return Number.isNaN(numeric) ? null : numeric
})

// 格式化日期
const formatDate = (dateString) => {
    if (!dateString) return ''
    return new Date(dateString).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })
}
</script>

<template>
    <div v-if="series && seriesPosts.length > 0" class="space-y-6">
        <!-- 系列信息 -->
        <div class="rounded-2xl bg-zinc-50/50 p-6 dark:bg-zinc-900/50">
            <div class="space-y-3">
                <Link
                    :href="route('blog.series.show', series.slug)"
                    class="inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-zinc-900 transition hover:text-primary-600 dark:text-zinc-100 dark:hover:text-primary-300"
                >
                    <BookOpenIcon class="h-5 w-5" aria-hidden="true" />
                    {{ series.name }}
                </Link>
                <p v-if="series.description" class="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
                    {{ series.description }}
                </p>
                <p class="text-xs font-medium text-zinc-500 dark:text-zinc-400">
                    共 {{ seriesPosts.length }} 篇文章
                </p>
            </div>
        </div>

        <!-- 系列文章目录 -->
        <div class="rounded-2xl bg-zinc-50/50 p-4 dark:bg-zinc-900/50">
            <div class="space-y-1.5">
                <Link
                    v-for="(post, index) in seriesPosts"
                    :key="post.id"
                    :href="route('blog.posts.show', post.slug)"
                    :class="[
                        'group flex items-center gap-4 rounded-xl px-3 py-2 transition',
                        post.id === currentId
                            ? 'bg-primary-50/70 text-primary-700 dark:bg-primary-500/10 dark:text-primary-200'
                            : 'text-zinc-600 hover:bg-primary-50/40 hover:text-primary-700 dark:text-zinc-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-200'
                    ]"
                >
                    <div
                        :class="[
                            'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-xs font-semibold',
                            post.id === currentId
                                ? 'bg-white text-primary-600 dark:bg-zinc-900 dark:text-primary-200'
                                : 'bg-zinc-100 text-zinc-500 group-hover:text-primary-600 dark:bg-zinc-800 dark:text-zinc-300'
                        ]"
                    >
                        {{ index + 1 }}
                    </div>
                    <div class="flex min-w-0 flex-1 flex-col gap-1">
                        <span
                            :class="[
                                'truncate text-sm font-medium',
                                post.id === currentId
                                    ? 'text-primary-700 dark:text-primary-200'
                                    : 'text-zinc-800 group-hover:text-primary-700 dark:text-zinc-100 dark:group-hover:text-primary-200'
                            ]"
                        >
                            {{ post.title }}
                        </span>
                        <span class="text-[11px] uppercase tracking-[0.15em] text-zinc-400 group-hover:text-primary-500 dark:text-zinc-500 dark:group-hover:text-primary-300">
                            {{ formatDate(post.published_at) }}
                        </span>
                    </div>
                    <span
                        v-if="post.id === currentId"
                        class="inline-flex flex-shrink-0 items-center rounded-full bg-white/80 px-2 py-0.5 text-[11px] font-medium text-primary-600 dark:bg-primary-500/10 dark:text-primary-200"
                    >
                        当前
                    </span>
                </Link>
            </div>
        </div>

        <!-- 上一篇/下一篇导航 -->
        <div class="grid gap-3 md:grid-cols-2">
            <Link
                v-if="prevInSeries"
                :href="route('blog.posts.show', prevInSeries.slug)"
                class="group flex items-center gap-3 rounded-2xl bg-zinc-50/50 px-4 py-3 text-left text-sm text-zinc-500 transition hover:bg-primary-50/50 hover:text-primary-700 dark:bg-zinc-900/50 dark:text-zinc-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-200"
            >
                <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-zinc-100 text-zinc-500 transition group-hover:bg-primary-600 group-hover:text-white dark:bg-zinc-800 dark:text-zinc-300 dark:group-hover:bg-primary-500">
                    <ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
                </div>
                <div class="min-w-0">
                    <p class="text-[11px] uppercase tracking-[0.2em] text-zinc-400 group-hover:text-primary-500 dark:text-zinc-500">上一篇</p>
                    <p class="truncate text-sm font-medium text-zinc-800 group-hover:text-primary-600 dark:text-zinc-100 dark:group-hover:text-primary-200">
                        {{ prevInSeries.title }}
                    </p>
                </div>
            </Link>
            <div v-else class="rounded-2xl" />

            <Link
                v-if="nextInSeries"
                :href="route('blog.posts.show', nextInSeries.slug)"
                class="group flex items-center justify-end gap-3 rounded-2xl bg-zinc-50/50 px-4 py-3 text-right text-sm text-zinc-500 transition hover:bg-primary-50/50 hover:text-primary-700 dark:bg-zinc-900/50 dark:text-zinc-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-200"
            >
                <div class="min-w-0">
                    <p class="text-[11px] uppercase tracking-[0.2em] text-zinc-400 group-hover:text-primary-500 dark:text-zinc-500">下一篇</p>
                    <p class="truncate text-sm font-medium text-zinc-800 group-hover:text-primary-600 dark:text-zinc-100 dark:group-hover:text-primary-200">
                        {{ nextInSeries.title }}
                    </p>
                </div>
                <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-zinc-100 text-zinc-500 transition group-hover:bg-primary-600 group-hover:text-white dark:bg-zinc-800 dark:text-zinc-300 dark:group-hover:bg-primary-500">
                    <ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
                </div>
            </Link>
            <div v-else class="rounded-2xl" />
        </div>
    </div>
</template>

